<template>
  <div>
    <template>
      <el-main>
        <el-row>
          <el-col span="16">
            <el-button type="primary">下载列表</el-button>
          </el-col>
          <el-col span="8">
            <el-autocomplete
                class="right-search"
                v-model="state"
                :fetch-suggestions="querySearchAsync"
                placeholder="请输入客户名称"
                @select="handleSelect"
            ></el-autocomplete>
            <el-button @click="searchData" icon="el-icon-search" type="primary">搜索</el-button>
          </el-col>
        </el-row>
      </el-main>
      <el-table
          ref="singleTable"
          :data="tableData"
          highlight-current-row
          @current-change="handleCurrentChange"
          style="width: 100%"
          border>
        <el-table-column
            align="center"
            property="id"
            label="编号"
            width="60">
        </el-table-column>
        <el-table-column
            sortable
            align="center"
            property="customerId"
            label="流失用户ID"
            width="120">
        </el-table-column>
        <el-table-column
            property="reason"
            label="流失原因"
            align="center"
            width="180">
        </el-table-column>
        <el-table-column
            property="drainDate"
            label="流失时间"
            align="center"
            width="220">
        </el-table-column>
        <el-table-column
            property="delay"
            label="暂缓流失计划"
            align="center"
            width="240">
        </el-table-column>
        <el-table-column
            property="status"
            label="流失状态"
            align="center"
            sortable
            width="120">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === '0'" type="info" value="0">启用</el-tag>
            <el-tag v-if="scope.row.status === '1'" type="warning" value="1">流失</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            property="lastOrderDate"
            label="最后订单时间"
            align="center"
            width="240">
        </el-table-column>
        <el-table-column
            property="operation"
            label="操作"
            align="center">
          <template slot-scope="scope">
<!--            @click="suspendPlain"-->
            <el-button
                size="mini"
                type="warning" plain >暂缓计划
            </el-button>
            <el-button
                size="mini"
                type="warning" plain @click="handleUpdate(scope.row)">确认流失
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 添加或修改用户对话框 -->
      <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="open" width="600px">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-row>
            <el-col >
              <el-form-item label="流失计划" prop="delay">
                <el-input v-model="form.delay" placeholder="请输入暂缓流失计划"/>
              </el-form-item>
            </el-col>
            <el-col >
              <el-form-item label="原因" prop="reason">
                <el-input v-model="form.reason" placeholder="请输入流失原因"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>

      <div class="block">
        <span class="demonstration"></span>
        <el-pagination
            :page-sizes="[5, 10, 15]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400">
        </el-pagination>
      </div>
    </template>
  </div>
</template>

<script>
import {getDrainsList, okDrains,findById} from "@/api/drains";
export default {

  name: "CustomDrainsView",
  data() {
    return {
      tableData: [],
      open:false,
      form: {
        id: '',
        customerId: '',
        status: '',
        delay: '',
        reason: '',
        drainDate: '',
        lastOrderDate: ''
      },

    };
  },
  created() {
    this.loadDrainsList();
  },
  mounted() {
    this.loadDrainsList();
  },
  methods: {
    //修改方法
    handleUpdate(row) {
      findById(row.id).then(response => {
        this.form=response.data
        console.log(response.data)
        this.open = true;
        this.title = "修改用户";
      });
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          okDrains(this.form).then(res => {
            if (res.code === 200) {
              this.msgSuccess('提交成功!');
              this.open = false;
              this.reset();
            }
          })
        }
      });
    },
    //取消按钮
    cancel() {
      this.open = false;
    },
    //重置页面和表单
    reset() {
      this.form = {}
      this.loadDrainsList()
    },
    //加载table
    loadDrainsList() {
      getDrainsList().then(res => {
        console.log(res)
        this.tableData = res.data
      })
    }
  }
}

</script>


<style scoped>

.right-search {

}
</style>
